<template>
  <el-form ref="editFormData" :model="editFormData" :rules="editFormRule" class="editFormData" v-bind="$attrs" v-on="$listeners">
    <el-row>
      <el-col
        v-for="(editItem, editIndex) in editFormMap"
        :key="editIndex"
        :span="editItem.col || 12"
        :xs="editItem.col === 0 ? editItem.xs || 12 : {}"
        :sm="editItem.col === 0 ? editItem.sm || 8 : {}"
        :md="editItem.col === 0 ? editItem.md || 8 : {}"
        :lg="editItem.col === 0 ? editItem.lg || 6 : {}"
        :xl="editItem.col === 0 ? editItem.xl || 6 : {}"
      >
        <el-form-item :prop="editItem.prop" :label-width="(editItem.width || 130) + 'px'" :class="editItem.customClass || ''">
          <template slot="label">
            <span v-show="!editItem.switchProp || parseInt(editFormData[editItem.switchProp])">
              {{ editItem.label }}
              <el-popover v-if="editItem.tooltipText" placement="top" trigger="hover">
                <span>{{ editItem.tooltipText }}</span>
                <i class="el-icon-question cursorLink" slot="reference"></i>
              </el-popover>
            </span>
          </template>
          <template v-if="['select', 'switchSelect'].includes(editItem.type)">
            <el-select
              v-model="editFormData[editItem.prop]"
              v-show="!editItem.switchProp || parseInt(editFormData[editItem.switchProp])"
              :disabled="editItem.disabled"
              :readonly="editItem.readonly"
              :filterable="editItem.filterable"
              :clearable="editItem.clearable"
              :multiple="editItem.multiple"
              :collapse-tags="editItem.collapse ? editItem.multiple : editItem.collapse"
              :placeholder="editItem.placeholder || '请选择' + editItem.label"
              @change="changeAction($event, editItem)"
            >
              <el-option
                v-for="(optionItem, optionIndex) in optionListMap[editItem.linkOptionProp || editItem.prop]"
                :key="optionIndex"
                :label="optionItem[editItem.optionLabel || editItem.optionLabelText || 'label']"
                :value="optionItem[editItem.optionValue || 'value']"
              ></el-option>
            </el-select>
          </template>
          <template v-else-if="['inputRange', 'selectRange'].includes(editItem.type)">
            <el-row>
              <el-col v-for="(rangeItem, rangeIndex) in editItem.children" :key="rangeIndex" :span="rangeItem.col || 10">
                <template v-if="rangeItem.type === 'input'">
                  <el-input v-model="editFormData[rangeItem.prop]" type="input" :placeholder="rangeItem.label"></el-input>
                </template>
                <template v-else-if="rangeItem.type === 'inputNumber'">
                  <el-input
                    v-model.number="editFormData[rangeItem.prop]"
                    :min="1"
                    type="number"
                    :placeholder="rangeItem.label"
                    onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
                  ></el-input>
                </template>
                <template v-else-if="rangeItem.type === 'separator'">
                  <div style="text-align: center">{{ rangeItem.label || '-' }}</div>
                </template>
              </el-col>
            </el-row>
          </template>
          <!-- .jpg, .png -->
          <template v-else-if="editItem.type === 'upload'">
            <el-upload
              :ref="editItem.prop + 'Upload'"
              :file-list="fileListMap[editItem.prop]"
              :accept="editItem.accept || 'image/*'"
              :multiple="false"
              :limit="editItem.limit || 2"
              :headers="uploadOption.headers"
              :action="uploadOption.url + (editItem.url || '/file/alibyunupLoadFile')"
              :show-file-list="false"
              :before-upload="beforeUploadAction"
              :on-success="(data, file, fileList) => handleFileSuccess(editItem, data, { file, fileList })"
              :on-change="(file, fileList) => handleFileChange(editItem.prop + 'Upload', { file, fileList })"
            >
              <template v-if="editItem.style">
                <el-input disabled :value="getInputFileName(fileListMap[editItem.prop])" style="width: calc(100% - 70px)"></el-input>
                <el-button type="primary">上传</el-button>
              </template>
              <template v-else>
                <img v-if="editFormData[editItem.prop]" :src="editFormData[editItem.prop]" :style="editItem.imageStyle" />
                <i v-else class="el-icon-plus" :style="editItem.plusStyle"></i>
              </template>
            </el-upload>
          </template>
          <template v-else-if="editItem.type === 'radio'">
            <el-radio-group v-model="editFormData[editItem.prop]" :disabled="editItem.disabled">
              <el-radio
                v-for="(optionItem, optionIndex) in optionListMap[editItem.linkOptionProp || editItem.prop]"
                :key="optionIndex"
                :label="optionItem[editItem.optionValue || 'value']"
                :readonly="editItem.readonly"
              >
                {{ optionItem[editItem.optionLabel || editItem.optionLabelText || 'label'] }}
              </el-radio>
            </el-radio-group>
          </template>
          <template v-else-if="editItem.type === 'switch'">
            <el-switch
              v-model="editFormData[editItem.prop]"
              :active-value="editItem.activeValue"
              :inactive-value="editItem.inactiveValue"
              :disabled="editItem.disabled"
              :readonly="editItem.readonly"
            ></el-switch>
          </template>
          <template v-else-if="editItem.type === 'switchButton'">
            <el-button
              v-show="parseInt(editFormData[editItem.switchProp])"
              type="primary"
              @click="
                editItem.customClick &&
                  editItem.customClick(editItem.prop, editItem.action, {
                    _this: currentInstance,
                  })
              "
            >
              {{ editItem.text }}
            </el-button>
          </template>
          <template v-else-if="editItem.type === 'textarea'">
            <el-input
              v-model="editFormData[editItem.prop]"
              type="textarea"
              :rows="editItem.row"
              :disabled="editItem.disabled"
              :readonly="editItem.readonly"
              :placeholder="editItem.placeholder || '请填写' + editItem.label"
            ></el-input>
          </template>
          <template v-else-if="editItem.type === 'datePicker'">
            <el-date-picker
              v-model="editFormData[editItem.prop]"
              :type="editItem.dateType || 'date'"
              :format="editItem.format"
              :value-format="editItem.valueFormat"
              :disabled="editItem.disabled"
              :readonly="editItem.readonly"
              :clearable="editItem.clearable"
              :picker-options="editItem.pickerOptions"
              :placeholder="editItem.placeholder || '请选择' + editItem.label"
              @change="(date) => handleDateChange(editItem, date)"
            ></el-date-picker>
          </template>
          <template v-else-if="editItem.type === 'form-text'">
            <div style="padding: 0 15px">{{ editFormData[editItem.prop] || ' ' }}</div>
          </template>
          <template v-else-if="editItem.type === 'text'">
            <div>{{ editFormData[editItem.prop] }}</div>
          </template>
          <template v-else-if="editItem.type === 'inputNumber'">
            <el-input
              v-model.number="editFormData[editItem.prop]"
              type="number"
              :min="1"
              :disabled="editItem.disabled"
              :readonly="editItem.readonly"
              :clearable="editItem.clearable"
              :placeholder="editItem.placeholder || '请填写' + editItem.label"
              onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
            ></el-input>
          </template>
          <template v-else>
            <el-input
              v-model="editFormData[editItem.prop]"
              :disabled="editItem.disabled"
              :readonly="editItem.readonly"
              :clearable="editItem.clearable"
              :placeholder="editItem.placeholder || '请填写' + editItem.label"
              @input="inputAction(editItem.prop)"
            ></el-input>
          </template>
        </el-form-item>
      </el-col>
      <slot name="buttonGroup"></slot>
    </el-row>
  </el-form>
</template>
<script>
import setEditForm from '@/static/mixin/setEditForm';
export default {
  name: 'EditForm',
  mixins: [setEditForm],
  data() {
    return {
      currentInstance: this,
    };
  },
  methods: {
    getInputFileName(fileList = []) {
      let fileName = '';
      if (fileList.length) {
        const fileNameArr = fileList.map((item) => item.name);
        fileName = fileNameArr.join(',');
      }
      return fileName;
    },
  },
};
</script>
<style lang="scss" scoped>
.editFormData {
  & ::v-deep .el-form-item {
    width: 100%;
  }
  & ::v-deep .el-form-item .el-form-item__content {
    width: calc(100% - 130px);
  }
  & ::v-deep .el-form-item.buttonGroup .el-form-item__content {
    padding-left: 30px;
    width: 100%;
  }
  & ::v-deep .el-select,
  & ::v-deep .el-date-editor {
    width: 100%;
  }
  // input提示框保留换行符\n
  & ::v-deep .el-input::placeholder {
    white-space: pre-wrap;
  }
  & ::v-deep .el-form-item.is-error .el-upload .el-icon-plus {
    outline-color: #ff4949;
  }
  & ::v-deep .el-form-item.is-error .el-radio-group .el-radio__inner {
    border-color: #ff4949;
  }
  & ::v-deep .el-icon-plus {
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(0%);
    outline: 1px dashed #c0c4cc;
    color: #c0c4cc;
  }
  & ::v-deep .inputUpload .el-upload {
    width: 100%;
  }
  .formText {
    border-bottom: 1px solid #dcdfe6;
  }
  .cursorLink:hover {
    text-decoration: underline;
  }
}
</style>
